<template>
  <div class="personnelSelection">
    <div class="sta_title">
      <div class="goBack" @click="save">
        <Icon type="ios-arrow-back"/>
        <span class="gb_font">返回</span></div>
      <div class="st_font">
        <span class="stf_title">{{personTitle}}</span>
      </div>
    </div>
    <div class="content">
      <div class="title">{{title}}</div>
      <div class="personLists" v-if="personData.personType != 1">
        <RadioGroup v-model="choosePersonIndex" vertical>
          <Radio :label="index" v-for="(item,index) in personList">
            <span>{{item.name}}</span>
            <div class="position">{{item.position}}</div>
          </Radio>
        </RadioGroup>
      </div>
      <div class="personLists" v-else>
        <CheckboxGroup v-model="choosePersonList">
          <Checkbox :label="item.UserId" v-for="(item,index) in personList">
            <span>{{item.name}}</span>
            <div class="position">{{item.position}}</div>
          </Checkbox>
        </CheckboxGroup>
      </div>
    </div>
  </div>
</template>

<script>
  import cookie from 'js-cookie';
  export default {
    name: "personnelSelection",
    props: ['personData'],
    data() {
      return {
        personTitle: '',
        title: '',
        personList: [],
        choosePersonIndex: '',
        choosePersonList: [],
      }
    },
    created() {
      let self = this
      switch (self.personData.personType) {
        case 1: //会签
          self.personTitle = '发起会签'
          self.title = '选择会签人员'
          this.getInfo(1)
          break
        case 2: //报审
          self.personTitle = '发起报审'
          self.title = '选择报审人员'
          this.getInfo(1)
          break
        case 3: //指派负责人
          self.personTitle = '指派负责人'
          self.title = '指派负责人'
          this.getInfo(3)
          break
        case 4: //添加团队成员
          self.personTitle = '添加团队成员'
          self.title = '选择团队成员'
          this.getInfo(4)
          break
      }
    },
    methods: {
      save() {
        let self = this
        let str = {}
        let url = ''
        switch (self.personData.personType) {
          case 1:
            str = {
              problem_id: self.personData.problem_id,
              UserId: self.choosePersonList,
              step: self.personData.step,
              uid: cookie.get('uid')
            };
            url = '/item/trialsadd'
            break;
          case 2:
            let list = []
            list.push(self.personList[self.choosePersonIndex].UserId)
            str = {
              problem_id: self.personData.problem_id,
              UserId: list,
              step: self.personData.step,
              uid: cookie.get('uid')
            };
            url = '/item/trialsadd'
            break;
          case 3:
            str = {
              problem_id: self.personData.problem_id,
              UserId: self.personList[self.choosePersonIndex].UserId,
              uid: cookie.get('uid')
            };
            url = '/item/headeruser'
            break;
          case 4:
            str = {
              problem_id: self.personData.problem_id,
              UserId: self.personList[self.choosePersonIndex].UserId,
              uid: cookie.get('uid')
            };
            url = '/item/teamadd'
            break;
        }
        if (self.choosePersonIndex != '' || self.choosePersonIndex == 0){
          this.$Loading.start();
          var strdata = this.$twjsdes.enstr(str);
          this.$http.post(this.$API_URL + url, {alldata: strdata.alldata}).then((response) => {
            var res = this.$twjsdes.decrypt(response.data.alldata);
            this.$Loading.finish();
            console.log(res,123)
            if (res.status != 1) {
              this.$Message.error(res.msg);
            }
            this.$emit('save', 1)
          }).catch(function (error) {
            this.$Modal.error({
              title: '提示',
              content: '网络连接错误，请检查后重试'
            });
            //console.log(error);
          });
        } else {
          this.$emit('save', 1)
        }
      },
      getInfo(index){
        let self = this
        this.$Loading.start();
        let str = {}
        let url = ''
        switch (index) {
          case 1:
            str = {
              problem_id: self.personData.problem_id,
              uid: cookie.get('uid')
            };
            url = '/item/teamchoice'
            break;
          case 3:
            str = {
              problem_id: self.personData.problem_id,
              uid: cookie.get('uid')
            };
            url = '/item/headerchoice'
            break;
          case 4:
            str = {
              problem_id: self.personData.problem_id,
              uid: cookie.get('uid')
            };
            url = '/item/trialschoice'
            break;
        }
        var strdata = this.$twjsdes.enstr(str);
        this.$http.post(this.$API_URL + url, {alldata: strdata.alldata}).then((response) => {
          var res = this.$twjsdes.decrypt(response.data.alldata);
          self.personList = res.data.list
          if (index == 3){
            for (let i = 0; i < self.personList.length; i++){
              if (self.personList[i].is_header == 1){
                self.choosePersonIndex = i
              }
            }
          }
          this.$Loading.finish();
        }).catch(function (error) {
          this.$Modal.error({
            title: '提示',
            content: '网络连接错误，请检查后重试'
          });
          //console.log(error);
        });
      },
    }
  }
</script>

<style scoped lang="less">
  .personnelSelection {
    width: 79%;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: fixed;
    right: 0;
    top: 0;
    opacity: 10;
    background: #f4f4f4;
    padding: 0 16px;
    box-sizing: border-box;
    .sta_title {
      display: flex;
      flex-direction: row;
      justify-content: center;
      position: relative;
      margin: 16px 0;
      width: 100%;
      height: 36px;
      line-height: 36px;
      .goBack {
        display: flex;
        flex-direction: row;
        position: absolute;
        left: 0;
        top: 0;
        cursor: pointer;
        .ivu-icon {
          font-size: 20px;
          line-height: 36px;
        }
        .gb_font {
          font-size: 17px;
          color: #666666;
          line-height: 37px;
        }
      }
      .st_font {
        display: flex;
        flex-direction: row;
        .stf_title {
          font-size: 17px;
          color: #222222;
          margin-left: 50px;
          margin-right: 50px;
        }
      }
    }
    .content{
      width: 100%;
      background: #f9f9f9;
      border-radius: 5px;
      border: 1px solid #e1e1e1;
      display: flex;
      flex-direction: column;
      .title{
        padding: 16px;
        box-sizing: border-box;
        font-size: 16px;
        color: #222222;
        border-bottom: 1px solid #e1e1e1;
        background: #fff;
        margin-bottom: 16px;
      }
      .personLists{
        display: flex;
        flex-direction: column;
        overflow-y: scroll;
        .ivu-radio-group{
          background: #fff;
          margin-bottom: 35px;
          .ivu-radio-wrapper{
            border-top: 1px solid #e1e1e1;
            height: 48px;
            line-height: 48px;
            padding: 0 16px;
            box-sizing: border-box;
            font-size: 14px;
            .position{
              float: right;
            }
          }
          .ivu-radio-wrapper:last-child{
            border-bottom: 1px solid #e1e1e1;
          }
        }
        .ivu-checkbox-group{
          display: flex;
          flex-direction: column;
          background: #fff;
          margin-bottom: 35px;
          .ivu-checkbox-group-item{
            border-top: 1px solid #e1e1e1;
            height: 48px;
            line-height: 48px;
            padding: 0 16px;
            box-sizing: border-box;
            font-size: 14px;
            .position{
              float: right;
            }
          }
          .ivu-checkbox-group-item:last-child{
            border-bottom: 1px solid #e1e1e1;
          }
        }
      }
    }
  }
  /* 手机竖屏 */
  @media screen and (min-width: 0px) and (max-width: 820px) {
    .personnelSelection{
      width: 100% !important;
      padding: 0 8px !important;
      .sta_title{
        margin: 8px 0 !important;
      }
      .title{
        padding: 8px !important;
        margin-bottom: 8px !important;
      }
      .personLists{
        .ivu-radio-wrapper{
          padding: 0 8px !important;
          margin-right: 0 !important;
        }
      }
    }
  }
</style>